<template>
  <div class="commonModal">
    <a-modal :visible="modalVisible" :title="modalTitle" @ok="handleOk" @cancel="handCancel" width="900px">
      <a-input-search
        placeholder="请输入"
        style="width: 200px"
        @search="onSearch"
        v-model="searchVal"
      />
      <div class="personBox" v-if="selectType === 'radio'">
        <div class="searchPeople">
          <a-radio-group v-model="radioVal" @change="onChange">
            <a-radio v-for="item in itemArr" :key="item.oid" :value="item.value" :style="radioStyle">
              {{ item.cnumber }}
            </a-radio>
          </a-radio-group>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import _ from "lodash";
export default {
  props: {
    title:{
      type: String,
      default: '关联项目经理'
    },
    modalVisible: {
      type: Boolean,
      default: false
    },
    selectType: {
      type: String,
      default: ""
    },
    itemArr: {
      type: Array,
      default: ()=>[]
    },
    itemArrCopy:{
      type: Array,
      default: ()=>[]
    },
    modalTitle:{
      type: String,
      default: ""
    },
  },
  data() {
    return {
      searchVal: "",
      selectValue: {},
      usedPeople: true,
      radioVal:'',
      radioStyle:{
        display:'block',
        height:'30px',
        lineHeight:'30px'
      },
      strInfo:'',
    }
  },
  watch: {
    // itemArr: {
    //   handler(n) {
    //     n.map(i=>{
    //       return i.checked = false
    //     })
    //     this.managerList = n
    //   }
    // }
  },
  methods: {
    handleOk() {
       this.searchVal= ""
       this.usedPeople = true
      // if (this.selectValue) {
        this.$emit('searchRes',this.strInfo)
        // this.$emit("handleOk", this.strInfo);
      // } else {
      //   this.$emit("handleOk", '');
      // }
    },
    handCancel() {
      this.usedPeople = true
      this.selectValue = {}
      this.searchVal= ""
      this.itemArr = this.itemArrCopy
      this.$emit("handCancel");
    },
    onSearch(value) {
      let arr = _.clone(this.itemArrCopy)
      if(value){
        this.itemArr = arr.filter(item=>{
          return item.cnumber.indexOf(value)!=-1;
        })
      }else{
        this.itemArr = this.itemArrCopy
        // this.$message.error('搜索关键词不能为空')
      }
    },
    // 数组排序
    compare(property){
      return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1.length - value2.length;
      }
    },
    onChange(e) {
      this.strInfo = e.target.value
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-modal-content {
  .ant-modal-body {
    .personBox {
      border: 1px solid #d9d9d9;
      margin-top: 10px;
      .nameTitle {
        padding: 6px 8px;
        border-bottom: 1px solid #d9d9d9;
      }
      .nameList {
        padding: 6px 8px;
      }
      .searchPeople{
        height: 332px;
        max-height: 332px;
        padding-left:20px;
        overflow: auto
      }
      // .ant-checkbox-group {
      //   display: block;
      //   padding: 6px 8px;
        .ant-checkbox-wrapper {
          padding: 4px 8px;
          display: block;
          margin-right: 0px;
          margin-left: 0px;
          .ant-checkbox + span {
            display: inline-block;
            width: 96%;
            padding-right: 0px;
            .itemBox {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .boxLeft{
                width: 30%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .boxRight{
                padding-left: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      // }
    }
  }
}
</style>